@mixin footer-theme($theme) {
  $primary: map-get($theme, primary);
  $warn: map-get($theme, warn);
  $background: map-get($theme, background);
  $accent: map-get($theme, accent);

  $lighter-primary-color: map-get($primary, 300);
  $darker-primary-color: map-get($primary, 700);

  $warn-color: map-get($warn, 500);
  $accent-color: map-get($accent, 500);
  $foreground: map-get($theme, foreground);
  $is-dark-theme: map-get($theme, is-dark);
  $back: map-get($background, background);
  $secondary-text: map-get($foreground, secondary-text);
  $link-hover-color: if($is-dark-theme, $lighter-primary-color, $darker-primary-color);

  .footer-wrapper {
    padding: 2rem;
    background-color: map-get($background, footer) !important;
    border-top: 1px solid map-get($foreground, divider);
    display: flex;
    transition: background-color 0.2s cubic-bezier(0.645, 0.045, 0.355, 1);

    .footer-row {
      display: flex;
      flex-direction: row;
      justify-content: space-between;
      width: 100%;
      max-width: 80rem;
      margin: 0 auto;

      .footer-socials {
        display: flex;
        flex: 1;
        align-self: center;
        justify-content: center;
        margin: 1rem 0;

        a {
          display: flex;
          align-items: center;
          text-decoration: none;
          margin: 0 0.25rem;
          color: $secondary-text;

          i {
            font-size: 1.875rem;
          }

          &:hover {
            color: $link-hover-color;
          }
        }
      }

      .theme {
        display: flex;
        align-items: center;
        justify-content: flex-end;
        flex: 1;
        margin: 0.5rem 0;
      }

      .swiss-wrapper {
        display: flex;
        justify-content: flex-end;
        align-items: center;
        flex: 1;

        .swisssvg {
          width: 14rem;
          margin: 1rem 0;
          color: if($is-dark-theme, #ffffff60, #00000060);

          .cross {
            fill: white;
          }
        }
      }

      .footer-links {
        display: flex;
        align-items: center;
        flex: 1;
        margin: 0.5rem 0;

        a {
          color: map-get($foreground, text);
          text-decoration: none;
          display: flex;
          align-items: center;
          font-size: 14px;
          margin: 0.25rem 0;
          transition: all 0.1s ease;
          white-space: nowrap;
          text-overflow: ellipsis;
          overflow: hidden;

          i {
            margin-left: 0.25rem;
            visibility: hidden;
            margin-right: 1rem;
          }

          &:hover {
            color: $link-hover-color;

            i {
              visibility: visible;
            }
          }
        }
      }

      @media only screen and (max-width: 800px) {
        flex-direction: column;

        .footer-links {
          order: 2;
          justify-content: center;

          a {
            margin: 0 0.5rem;

            i {
              display: none;
            }
          }
        }

        .swiss-wrapper {
          order: 1;
        }

        .theme {
          order: 2;
          justify-content: center;
        }

        .footer-socials {
          order: 3;
        }
      }
    }
  }
}
